<template>
  <el-aside :enable-aside-hidden="false" :width="width + 'px'">
    <div class="title-bar" :style="{'height': titleBarHeight + 'px'}">
      <slot name="title">
        <span :style="{'line-height': titleBarHeight - 10 + 'px'}" class="title-left">
          {{ title }}
        </span>
        <span :style="{'line-height': titleBarHeight - 10 + 'px'}" class="title-right">
          <i class="el-icon-plus" @click="addFuc" v-permission="envAddPermission"/>
        </span>
      </slot>
    </div>
    <slot name="content">
      <div style="height: 700px;overflow-y: auto">
        <div :style="{'height': itemBarHeight + 'px'}" v-for="(item, index) in data" :key="index" class="item-bar"
             @click="itemSelected(index, item)" :class="{'item-selected' : index == selectIndex}">
          <el-tooltip :content="item.name">
            <input class="item-input"
                   :style="{'height': itemBarHeight - 12 + 'px', 'line-height': itemBarHeight - 12 + 'px', 'width': width - 90 + 'px'}"
                   v-model="item.name" :placeholder="$t('commons.input_content')"/>
          </el-tooltip>
          <span :style="{'line-height': itemBarHeight - 10 + 'px'}" class="item-right">
          <i v-for="(operator, operatorIndex) in itemOperators" :key="operatorIndex" :class="operator.icon"
             v-permission="operator.permissions"
             @click.stop="operator.func(item, index)">
          </i>
      </span>
        </div>
      </div>
    </slot>
  </el-aside>
</template>

<script>

export default {
  name: "MsAsideItem",
  components: {},
  data() {
    return {
      selectIndex: -1
    }
  },
  props: {
    width: {
      type: Number,
      default: 200
    },
    titleBarHeight: {
      type: Number,
      default: 40
    },
    itemBarHeight: {
      type: Number,
      default: 35
    },
    title: String,
    data: Array,
    deleteFuc: Function,
    addFuc: Function,
    itemOperators: {
      type: Array,
      default() {
        return [
          {
            icon: 'el-icon-delete',
            func: this.deleteFuc,
            permissions: []
          }
        ];
      }
    },
    enableAsideHidden: {
      type: Boolean,
      default: true
    },
    envAddPermission: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  methods: {
    itemSelected(index, item) {
      this.selectIndex = index;
      this.$emit('itemSelected', item);
    }
  }
}
</script>

<style scoped>

.ms-aside-container {
  padding: 0;
}

.title-bar {
  width: 100%;
  background: #e9ebef;
  padding: 5px 10px;
  box-sizing: border-box;
}

.item-bar {
  width: 100%;
  background: #F9F9F9;
  padding: 5px 10px;
  box-sizing: border-box;
  border: solid 1px #e6e6e6;
}

.item-bar:hover .item-right {
  visibility: visible;
}

.title-right, .item-right {
  float: right;
}

.item-right {
  visibility: hidden;
}

.item-right i {
  margin: 5px;
}

i:hover {
  color: #409EFF;
  font-size: large;
}

.item-selected {
  background: #ECF5FF;
  border-left: solid #409EFF 5px;
}

.item-selected .item-right {
  visibility: visible;
}

.item-input {
  border: hidden;
  display: inline;
  background-color: rgba(0, 0, 0, 0);
}

.item-input:focus {
  outline: none;
}

</style>
